<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .isactive {
        background-color: #f66;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <template id="content">
      <!-- 不是对象类型的数据监听 -->

      <div>
        <label for="question">请输入问题:</label>
        <input type="text" id="question" v-model="question" />
      </div>
      <div>
        <button @click="setInfo">修改信息</button>
      </div>
      <div>
        <ul>
          <li v-for="(v,i) in infoList" :key="v.id">{{i}}-{{v.name}}-{{v.age}}</li>
        </ul>
      </div>
    </template>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script type="text/javascript">
    const app = Vue.createApp({
      template: "#content",
      data() {
        return {
          question: "",
          infoList: [
            {
              id: 1,
              name: "lion",
              age: 18,
            },
            {
              id: 2,
              name: "lion2",
              age: 16,
            },
            {
              id: 3,
              name: "lion3",
              age: 19,
            },
          ],
        };
      },
      watch: {
          //<!-- 不是对象类型的数据监听 -->
        question(newValue, oldValue) {
          console.log(newValue);
          console.log(oldValue);
          this.getAnwser(newValue);
        },
        //<!-- 对象类型的数据监听 -->
        infoList:{
            handler(newValue, oldValue){
                console.log(newValue, oldValue);    //newValue和oldValue相等,这是因为查询地址相同
            },
            deep: true,
            immediate: true
        }
      },
      methods: {
        getAnwser(question) {
          console.log(`${question}的问题是哈哈`);
        },
        setInfo(){
            this.infoList[0].age += 1
        }
      },
    });
    app.mount("#app");
  </script>
</html>
